<template>
    <div>
        <div>
            <img :src=img alt="" style="width: 100%;height: 750px">
        </div>

        <el-page-header @back="goBack" style="position: absolute;top: 20px;left:20px;color: pink" >
        </el-page-header>

        <div id="main" >
            <h2>用户登录</h2>
            <div class="input1">
                <h4>账号：</h4><el-input v-model="account" style="width: 230px;margin: 10px"></el-input>
            </div>
            <div class="input1">
                <h4>密码：</h4><el-input v-model="password" style="width: 230px;margin: 10px" show-password></el-input>
            </div>
            <div>
                <el-button @click="signIn">注册</el-button>
                <el-button @click="loginIn">直接登录</el-button>
                <el-button @click="yiBanLogin">易班登录</el-button>
            </div>
        </div>

        <el-drawer
                title="用户注册"
                :visible.sync="drawer"
                :direction='direction'
                >
            <span>
                <div style="text-align: center">
                    <el-input v-model="user.userAccount" style="margin-top: 10px;width: 300px"></el-input>
                    <el-input v-model="user.userPassword" style="margin-top: 10px;width: 300px"></el-input>
                    <el-input v-model="user.userName" style="margin-top: 10px;width: 300px"></el-input>
                    <el-input v-model="user.userPlace" style="margin-top: 10px;width: 300px"></el-input>
                    <div>
                        <el-button type="danger" style="margin-top: 10px;">提交</el-button>
                    </div>

                </div>

            </span>
        </el-drawer>
    </div>

</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                drawer:false,
                direction: 'rtl',
                account: '',
                password: '',
                user:{
                  userAccount:'账号',
                  userPassword:'密码',
                  userName:'姓名',
                  userPlace:'地址',
                },
                img:require("../assets/bgc/11.jpg"),
            }
        },
        methods: {
            yiBanLogin(){
                window.location.href = "https://openapi.yiban.cn/oauth/authorize?client_id=d9ad97434d5e9a9b&redirect_uri=http://127.0.0.1:8083/user/getCode"

            },
            signIn: function () {
                this.drawer = true;
            },
            goBack(){
                this.$router.push("/");
            },
            loginIn: function () {
                this.$http({
                    methods: 'POST',
                    url: 'http://localhost:8080/user/login',
                    params: {
                        "account": this.$data.account,
                        "password": this.$data.password,
                    }
                }).then( (res)=> {
                    console.log(res);
                    if(res.data.res == true){
                        this.$router.push("/user");

                        localStorage.setItem("userID",res.data.userID);
                        /*localStorage.setItem("userSign",res.data.userSign);*/
                    }
                }).catch(error => {
                    console.log(error);
                })
            }
        }
    }
</script>

<style scoped>
    #main{
        background-color: #8FC0A9;
        margin: 0 auto;
        padding: 20px;
        border: green 2px ;
        border-radius: 10px;
        box-shadow: #42b983 5px 5px 5px;
        width: 350px;
        position: absolute;
        top: 220px;
        left: 560px;
        right: auto;
        text-align: center;
    }
    .input1{
        margin: 10px;
        display: flex;
    }
    button{
        margin: 10px;
    }
</style>